let popup
import { useTrafficStore } from "@/stores/counter";
const {toggleUpdatePopupVisible,toggleAddPopupVisible} = useTrafficStore()
const trafficStore = useTrafficStore()
/**
 * 
 * @param {Array} center //要显示popup的坐标
 * @param {$map} map    //地图实例
 * 
 */
export const setPopup = (center, map) => {
    // DOM 转化overlayer
    var container = document.getElementById('popup');
    popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-left',  
        //是否应该停止事件传播到地图窗口
        stopEvent: true,
        autoPanAnimation: {
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
            duration: 250,
        },
    })

    map.addOverlay(popup);
    popup.setPosition(center)
    //设置popup偏移
    popup.setOffset([129, 5])

}
//关闭popup
export const closeAddPopup = () => {
    popup.setPosition(null)
    trafficStore.addPopupSource.clear()
    toggleAddPopupVisible()
}

export const closeUpdatePopup = () => {
    popup.setPosition(null)
    trafficStore.updatePopupSource.clear()
    toggleUpdatePopupVisible()
}
